<script setup lang="ts">
import { ref } from "vue"

const list = ref<any>([{
    orderSn: "32742501",
    amount: "-2000元",
    fee: "5元",
    actualAmount: "1995元",
    account: "建设银行(尾号5864)",
    status: "已到账",
    withdrawTime: "2023-04-05 10:30:33",
    arrivalTime: "2023-04-06 14:00:00"
}, {
    orderSn: "32742501",
    amount: "-2000元",
    fee: "5元",
    actualAmount: "1995元",
    account: "建设银行(尾号5864)",
    status: "处理中",
    withdrawTime: "2023-04-05 10:35:33",
    arrivalTime: "-"
}, {
    orderSn: "32742501",
    amount: "+10元",
    fee: "0元",
    actualAmount: "10元",
    account: "建设银行(尾号5864)",
    status: "已到账",
    withdrawTime: "2023-04-06 09:15:33",
    arrivalTime: "2023-04-07 10:00:00"
}, {
    orderSn: "98765432",
    amount: "+500元",
    fee: "0元",
    actualAmount: "500元",
    account: "建设银行(尾号5864)",
    status: "成功",
    withdrawTime: "2023-04-09 11:00:33",
    arrivalTime: "2023-04-10 12:00:00"
}, {
    orderSn: "11223344",
    amount: "-300元",
    fee: "3元",
    actualAmount: "297元",
    account: "建设银行(尾号5864)",
    status: "提现失败",
    withdrawTime: "2023-04-10 09:45:33",
    arrivalTime: "-"
}]);
</script>

<template>
    <umrp-container direction="vertical" :gap="16">
        <umrp-search-card>
            <umrp-row :gutter="16" style="margin-bottom: 16px;">
                <umrp-col :span="12">
                    <umrp-form-item label="支付单号">
                        <umrp-input placeholder="请输入支付单号"></umrp-input>
                    </umrp-form-item>
                </umrp-col>
                <umrp-col :span="12">
                    <umrp-form-item label="提现状态">
                        <umrp-select placeholder="提现状态">
                            <umrp-option>处理中</umrp-option>
                            <umrp-option>已到账</umrp-option>
                            <umrp-option>提现失败</umrp-option>
                        </umrp-select>
                    </umrp-form-item>
                </umrp-col>
            </umrp-row>
            <umrp-row :gutter="16">
                <umrp-col :span="12">
                    <umrp-form-item label="提现时间">
                        <umrp-datepicker></umrp-datepicker>
                    </umrp-form-item>
                </umrp-col>
                <umrp-col :span="12">
                    <umrp-form-item label="到账时间">
                        <umrp-datepicker></umrp-datepicker>
                    </umrp-form-item>
                </umrp-col>
            </umrp-row>
        </umrp-search-card>
        <umrp-table :data="list">
            <template #columns>
                <umrp-table-column title="支付单号" data-index="orderSn"></umrp-table-column>
                <umrp-table-column title="金额" data-index="amount"></umrp-table-column>
                <umrp-table-column title="提现手续费" data-index="fee"></umrp-table-column>
                <umrp-table-column title="实际到账" data-index="actualAmount"></umrp-table-column>
                <umrp-table-column title="提现账户" data-index="account"></umrp-table-column>
                <umrp-table-column title="提取状态" data-index="status"></umrp-table-column>
                <umrp-table-column title="提现时间" data-index="withdrawTime"></umrp-table-column>
                <umrp-table-column title="到账时间" data-index="arrivalTime"></umrp-table-column>
            </template>
            <template #user>
                <umrp-user-info :avatar="false"></umrp-user-info>
            </template>
        </umrp-table>
    </umrp-container>
</template>